<template>
  <div>
    <a class="btn" v-if="!imgDataUrl" @click="toggleShow">上传头像</a>
    <my-upload
      field="img"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="show"
      :width="width"
      :height="height"
      url="/upload"
      :params="params"
      :headers="headers"
      img-format="png"
    ></my-upload>
    <img :src="imgDataUrl" />
  </div>
</template>
<script lang="ts">
import "babel-polyfill"; // es6 shim
import myUpload from "vue-image-crop-upload";
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
  name: "ant-single-upload",
  components: {
    "my-upload": myUpload
  }
})
export default class AntSingleUpload extends Vue {
  @Prop({ type: Number, default: 200 }) width!: number;
  @Prop({ type: Number, default: 200 }) height!: number;
  show: boolean = false;
  params: object = {
    token: "123456798",
    name: "avatar"
  };
  headers: object = {
    smail: "*_~"
  };
  imgDataUrl: string = ""; // the datebase64 url of created image

  toggleShow() {
    this.show = !this.show;
  }

  /**
   * crop success
   *
   * [param] imgDataUrl
   * [param] field
   */
  cropSuccess(imgDataUrl, field) {
    console.log("-------- crop success --------");
    this.imgDataUrl = imgDataUrl;
  }
  /**
   * upload success
   *
   * [param] jsonData  server api return data, already json encode
   * [param] field
   */
  cropUploadSuccess(jsonData, field) {
    console.log("-------- upload success --------");
    console.log(jsonData);
    console.log("field: " + field);
  }
  /**
   * upload fail
   *
   * [param] status    server api return error status, like 500
   * [param] field
   */
  cropUploadFail(status, field) {
    console.log("-------- upload fail --------");
    console.log(status);
    console.log("field: " + field);
  }
}
</script>
<style lang="less">
</style>